<template>
  <div class="w-full lg:w-100 lg:mx-auto lg:pt-10">
    <div class="px-4 overflow-hidden lg:flex">
      <!-- info -->
      <div class="lg:w-4/12 lg:ltr:mr-12 lg:rtl:ml-12 text-white text-xs lg:text-sm pt-6">
        <h2 class="text-lg mb-3">{{ $mt('About') }} {{ data.title }}</h2>
        <p class="mb-2 text-white3">{{ data.content }}</p>
      </div>
      <!-- 推荐商品 -->
      <div v-if="data.recommendGoods.length" class="lg:w-8/12 text-white mt-10">
        <!-- title -->
        <div class="flex items-center mb-6">
          <b class="mr-2 text-base">{{ data.title }}</b>
          <p>- {{ $mt('Recommend Goods') }}</p>
        </div>
        <!-- list -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-y-4 lg:bg-[#23282a] lg:rounded-2xl lg:p-6 lg:my-5">
          <nuxt-link
            external
            :to="$localePath(`/goods/${item.urlName || item.id}`)"
            class="flex items-center"
            v-for="item in data.recommendGoods">
            <div class="w-14 h-14 ltr:mr-4 rtl:ml-4 lg:w-16 lg:h-16 shrink-0">
              <YImage
                :src="item.smallIcon"
                alt=""
                class="trans object-cover w-full h-full rounded-md border border-[#b8b5b59a]" />
            </div>
            <div>
              <div class="text-sm">{{ item.name }}</div>
              <span class="text-xs text-[#8c8d8e]">{{ item.areaCode }}</span>
            </div>
          </nuxt-link>
        </div>
      </div>
      <common-empty v-else />
    </div>
    <!-- 相关平台  相关商品-->
    <div class="text-white px-4">
      <!-- game -->
      <div class="pb-6 mt-6" v-if="data?.relateGames.length">
        <p class="lg:text-lg font-bold mb-6">{{ $mt('Related Games') }}</p>
        <div class="grid grid-cols-2 gap-4 lg:grid-cols-6 lg:gap-6">
          <IntroduceItem v-for="(item, index) in data?.relateGames" :key="index" :is-show-bg="true" :dataInfo="item" />
        </div>
      </div>
      <!-- goods -->
      <div class="pb-6 mt-6" v-if="data?.relateGoods.length">
        <p class="mb-6 lg:text-lg font-bold">{{ $mt('Related Goods') }}</p>
        <div class="grid grid-cols-3 lg:grid-cols-8 gap-x-4 gap-y-6">
          <nuxt-link
            external
            :to="$localePath(`/goods/${item.urlName || item.id}`)"
            v-for="item in data?.relateGoods"
            class="cursor-pointer">
            <YImage
              eager
              :src="$withPicOrigin(item.smallIcon)"
              :alt="`${$mt('how to recharge')} ${item.name}`"
              height="100"
              width="100"
              class="trans mb-1.5 object-cover bg-[rgba(255,255,255,0.2)] rounded-xl h-[105px] w-[105px] lg:w-[150px] lg:h-[150px] cursor-pointer" />
            <p class="text-sm lg:text-base text-center">{{ item.name }}</p>
          </nuxt-link>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import IntroduceItem from '../introduce/IntroduceItem.vue'
import YImage from '~/components/logic/YImage.vue'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'
const props = defineProps(['data'])
</script>

<style scoped lang="scss">
@keyframes scale-big {
  to {
    transform: scale3d(1.05, 1.05, 1.05);
  }
}
.trans {
  &:hover {
    animation: scale-big 0.3s forwards;
  }
}
</style>
